<template>
  <div class="cart container">
    <header>
		<i class="iconfont icon-return" @click="back"></i>
		<span>购物车</span>
		<span @click="isNavBar" v-text='  isNavStatus ? "完成" :"编辑"  '></span>
	</header>
		
	<section v-if="list.length">
		<div class="cart-title">
			<!-- vuex 是单向的，不能使用v-model='isCheckAll' 使用 :value="isCheckAll" -->
			<!-- <van-checkbox v-model="isCheckAll" checked-color="#b0352f" @click="checkAllFn"></van-checkbox> -->
			<van-checkbox :value="isCheckAll" checked-color="#b0352f" @click="checkAllFn"></van-checkbox>
			<span>商品</span>
		</div>
		<div class="scroll" ref="scroll">
			<ul>
				<li v-for="(item , index) in list" :key="index">
					<div class="check">
						<van-checkbox @click="checkItem(index)" v-model="item.checked" checked-color="#b0352f" ></van-checkbox>
						<img :src="item.goods_imgUrl" alt="">
					</div>
{{item.id}}
					<div class='goods'>
						<div class="goods-title">
							<span>{{item.goods_name}}</span>
							<i class="iconfont icon-delete" @click="delGoodsFn(item.id)"></i>
						</div>
						<div class="goods-price">￥{{item.goods_price}}</div>
						<van-stepper @change="changeNum($event, item)" v-model="item.goods_num" integer />
					</div>
					
				</li>
			</ul>
		</div>
		
		
	</section>
	<section v-else>
		<div>
			<h4>
				~暂时无数据，请添加商品~
			</h4>
			<button>
				<router-link to="/home">去首页看看</router-link>
			</button>
		</div>
	</section>
    <footer v-if="list.length">
		<div class="radio">
			<!-- vuex 是单向的，不能使用v-model='isCheckAll' 使用 :value="isCheckAll" -->
			<!-- <van-checkbox v-model="isCheckAll" checked-color="#b0352f" @click="checkAllFn"></van-checkbox> -->
			<van-checkbox :value="isCheckAll" checked-color="#b0352f" @click="checkAllFn"></van-checkbox>
		</div>
		<div class='total' v-show="!isNavStatus">
			<div>共有 
			  <span class="total-active">{{total.num}}</span>
			  件商品</div>
			<div>总计:
			   <span class="total-active">￥{{total.price.toFixed(2)}} + 0茶币</span>
			</div>
		</div>
		<div class="pay" v-if="isNavStatus" @click="delGoodsFn">删除</div>
		<div class="pay" v-else @click="goOrder">去结算</div>
	</footer>
  </div>
</template>

<script>
//引入封装的依赖
import http from "@/common/api/request.js";
import {
	   mapMutations,
	   mapGetters,
	   mapState,
	   mapActions} from "vuex";
import {Toast} from "mint-ui"
	   
//引入插件
import BetterScroll from "better-scroll";

export default {
  name: "Cart",
  components: {
  
  },
  data(){
	  return{
		  checked:false,
		  isNavStatus:false,
	  }
  },
  computed:{
	  ...mapState({
		  list:state=> state.cart.list,
		  selectList:state=>state.cart.selectList
	  }),
	  ...mapGetters(['isCheckAll','total']),
	 // 筛选购物车内的商品
	  goodList(){
	  	return this.selectList.map(id=>{
	  		return this.list.find(v=> v.id == id)
	  	})
	  },
  },
  created() {
  	 this.getData()
	 
  },
  methods:{
	  ...mapMutations(["cartList","checkItem","initOrder"]),
	  ...mapActions(['checkAllFn','delGoodsFn']),
	//获取购物车数据
	async getData(){
	        let res = await http.$axios({
	        	url:'/api/selectCart',
				method:'post',
				headers:{
					token:true
				}
	        })
			//为每一项添加选择状态checked
			res.data.forEach(item =>{
				item["checked"] = true;
			})
			
			this.cartList(res.data)
			
			//保证DOM渲染完毕后在执行
			this.$nextTick(() => {
			  this.initBs();
			})
	 },
	 
	 //编辑购物车
	 isNavBar(){
		 this.isNavStatus = !this.isNavStatus
	 },
	 
	 //修改某个商品数量
	 changeNum(value,item){
		 //当前购物车商品的 id以及 修改后的数量==》传递给后端
		 //value 就是修改后的数量
		 //item.id 就是购物车当前商品的id
		 http.$axios({
			 url:'/api/updateNum',
			 method:'post',
			 headers:{
				 token:true
			 },
			 data:{
				 id:item.id,
				 changeNum:value
			 }
		 }).then(res=>{
			 console.log(res)
		 })
	 },
	 
	 //结算
	 goOrder(){
		 if(!this.selectList.length){
		 	  Toast("请选择商品再结算")
		 	  return
		 }
		 
		 //获取选中的每一项的数据
		 let newList = []
		 
		 this.list.forEach(item =>{
			 this.selectList.filter(v => {
				 if(v == item.id){
					 newList.push(item)
				}
			 })
		 })
		 
		 //生成一个订单，获取订单号
		 http.$axios({
		 	  url:'/api/addOrder',
		 	  method:'post',
		 	  headers:{
		 	 	 token:true
		 	  },
		 	  data:{
		 	 	 arr:newList
		 	  }
		 }).then(res=>{
			
		 		if( !res.success ) return
				//存储订单号
				this.initOrder(res.data)
				
				this.$router.push({
					name:'Order',
					query:{
					 detail:JSON.stringify(this.selectList),
					 goodList:JSON.stringify(this.goodList)
					}
				})
		 })
		 
		
	 },
	 
	 //滚动
	 initBs() {
	   // let wrapper = this.$refs.scroll;
	   new BetterScroll(this.$refs.scroll, {
	     click: true,
	     movale: true,
	     zoom: true,
	     observeDOM: true, //解决刷新后依然有滚动效果
	   });
	 },
	 
	  //回退
	  back(){
		   this.$router.push('/home')
	  }
  }
};
</script>

<style scoped lang="less">
	.cart{
		// width: 100vw;
		header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 1rem;
			color:#fff;
			background-color: #b0352f;
			
			i{
				padding:0 0.4rem;
				font-size: 0.5rem;
			}
			span{
				padding: 0 0.4rem;
				font-size: 0.4rem;
			}
		}
		
		section{
			background-color: #f5f5f5;
			width: 100%;
			.cart-title{
				display: flex;
				padding: 0.3rem;
				span{
					padding:0 0.4rem;
					font-size: 0.4rem;
					font-weight: 400;
				}
			}
			
			.scroll{
				height:100%;
				overflow: hidden;
				ul{
					display: flex;
					flex-direction: column;
					padding-bottom: 1rem;
					
					li{
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						padding: 0.16rem 0.5rem;
						background-color: #fff;
						// height: 100%;
						
						.check{
							display: flex;
							padding-right: 0.3rem;
							
							img{
								margin-left: 0.3rem;
								width: 3rem;
								height: 3rem;
							}
						}
						
						.goods{
							flex:1;
							display: flex;
							flex-direction: column;
							padding-left: 0.4rem;
							font-size: 0.325rem;
							
							.goods-title{
								display: flex;
								justify-content: space-between;
								
								i{
									font-size: 0.45rem;
								}
								span{
									display: -webkit-box;
								    overflow: hidden;
								    -webkit-box-orient: vertical;
								    -webkit-line-clamp: 3;
								}
								
							}
							.goods-price{
								color: #b0352f;
							}
							/deep/ .van-stepper{
								text-align: right;
							}
						}
					}
				}
			}
			
			
		}
		
		footer{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height:1.5rem;
			border-top:0.05333rem solid #ccc;
			
			.radio{
				padding:0 0.4rem;
				color:#b0352f;
			}
			.total{
				font-size: 0.4rem;
				// width: 5rem;
				flex: 1;
				
				.total-active{
					color:#b0352f
				}
			}
			.pay{
				font-size: 0.4rem;
				background-color: #b0352f;
				text-align: center;
				line-height:1.5rem;
				width: 3.125rem;
				color:#fff;
			}
		}
		
	}
</style>
